<template>
  <div v-if="isRouterAlive">
    <el-row>
      <el-col :xs="8" :sm="8" :md="7" :lg="6"  style="height: 100vh">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item index="1">首页</el-menu-item>
          <el-submenu index="2">
            <template slot="title">月亮</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
            <el-menu-item index="2-3">选项3</el-menu-item>
            <el-submenu index="2-4">
              <template slot="title">选项4</template>
              <el-menu-item index="2-4-1">选项1</el-menu-item>
              <el-menu-item index="2-4-2">选项2</el-menu-item>
              <el-menu-item index="2-4-3">选项3</el-menu-item>
            </el-submenu>
          </el-submenu>
        </el-menu>
        <el-menu default-active="1-4-1" class="el-menu-vertical-demo" style="width: auto">
          <el-menu-item index="1" @click="goBack">
            <i class="el-icon-location-outline"></i>
            <span slot="title">回到前台</span>
          </el-menu-item>
          <el-menu-item index="2" @click="Settings(1)">
            <i class="el-icon-menu"></i>
            <span slot="title">主题设置</span>
          </el-menu-item>
          <el-menu-item index="3" @click="Settings(2)">
            <i class="el-icon-receiving"></i>
            <span slot="title">文章设置</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-coin"></i>
            <span slot="title">权限设置</span>
          </el-menu-item>
          <el-menu-item index="5">
            <i class="el-icon-medal-1"></i>
            <span slot="title">角色设置</span>
          </el-menu-item>
          <el-menu-item index="6">
            <i class="el-icon-user"></i>
            <span slot="title">用户设置</span>
          </el-menu-item>
          <el-menu-item index="7" @click="Settings(6)">
            <i class="el-icon-document-delete"></i>
            <span slot="title">BUG处理</span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col :xs="16" :xl="16" :md="17" :lg="18"  style="height: 100vh">
        <ThemeSettingView ref="ThemeSettingView" v-show="ThemeSetting"></ThemeSettingView>
        <ArticleSettingsView v-show="ArticleSetting"></ArticleSettingsView>
        <BugView ref="BugView" v-show="BugSetting"></BugView>
      </el-col>
    </el-row>
    <BugModules ref="BugModules"></BugModules>
    <ThemeModules ref="ThemeModules"></ThemeModules>
  </div>
</template>

<script>
import ThemeSettingView from "./backendmodules/ThemeSettingView";
import ArticleSettingsView from "./backendmodules/ArticleSettingsView";
import BugView from "./backendmodules/BugView";
import BugModules from "./modules/BugModules";
import ThemeModules from "./modules/ThemeModules";
//后台主页
export default {
  name: "BackstageContent",
  components: {ThemeModules, BugModules, BugView, ArticleSettingsView, ThemeSettingView},
  provide () {
    return {
      reload: this.reload
    }
  },
  data(){
    return{
      activeIndex: '1',
      ThemeSetting: false,
      ArticleSetting: false,
      BugSetting: false,
      isRouterAlive: true
    }
  },
  created() {
    this.Settings(1)
  },
  methods: {
    reload () {
      this.isRouterAlive = false
      this.$nextTick(function () {
        this.isRouterAlive = true
      })
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    goBack(){
      window.location.replace("/modules/BlogContentModules");
    },
    //打开列表
    Settings(s){
      this.ThemeSetting = false;
      this.ArticleSetting = false;
      this.BugSetting = false;
      if(s == 1) this.ThemeSetting = true;
      else if(s == 2) this.ArticleSetting = true;
      else if(s == 6) this.BugSetting = true;
      else this.ThemeSetting = true;
    },
    //调用bug
    showSetting(data,lo){
      if(lo == 1) this.$refs.BugModules.showoverBUG(data);
      if(lo == 2) this.$refs.ThemeModules.showTheme(data);
    },
    ThisBugReload(){
      this.$refs.BugView.reloadBUG()
    },
    ThisThemeReload(){
      this.$refs.ThemeSettingView.reloadtheme()
    }
  }
}
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>
